<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="assets/css/font-awesome.min.css">
<!--[if IE 7]>
		  <link rel="stylesheet" href="assets/css/font-awesome-ie7.min.css" />
		<![endif]-->
  <link href="assets/css/bootstrap.min.css" rel="stylesheet" />
  <link rel="stylesheet" href="assets/css/ace.min.css" />
  <link rel="stylesheet" href="css/style.css"/>
 <script type="text/javascript" src="js/vue.min.js"></script>
 <script type="text/javascript" src="js/axios.js"></script>
 <!-- 引入样式 -->
 <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
 <!-- 引入组件库 -->
 <script src="https://unpkg.com/element-ui/lib/index.js"></script>
 <style>
  #print_style{
   width: 500px;
   height: 550px;
   display: flex;
   justify-content: center;
   align-items: center;
   position: fixed; /* 添加固定定位 */
   top: 50%; /* 从顶部50%位置开始 */
   left: 50%; /* 从左侧50%位置开始 */
   transform: translate(-50%, -50%); /* 使用transform将元素居中 */
  }
 </style>
<title>生成订单</title>
</head>

<body>
<div id="app">
<div class="page-content">
<div class="center"><a href="" class="btn btn-primary"  @click.prevent="fuel()">加油</a>
 <a href="javascript:ovid(0)" class="btn btn-warning print_btn" @click="getPut()">打印订单</a>
 <a class=" btn  btn-info" href="#" @click.prevent="topCancel()" >取消</a></div>
 <div class="Inquiry_info Order_Details_style">
   <div class="Numbering">项目编号<b>NGRT3242342342323</b></div> 
  <div>
   <ul class="clearfix"> 
   <li><label class="label_name">报价公司</label><span>{{comObj.supplier}}</span></li>
   <li><label class="label_name">项目名称</label><span>{{comObj.project_name}}</span></li>
    <li><label class="label_name">加油地点</label><span>{{comObj.place}}</span></li>
    <li><label class="label_name">加油时间</label><span>{{comObj.date}}</span></li>
    <li><label class="label_name">船名</label><span>{{comObj.boat_name}}</span></li>
    <li><label class="label_name">船名联系人</label><span>张先生</span></li> 
    <li><label class="label_name">联系电话</label><span>1898654565</span></li> 
   </ul>
  </div>
  <div class="Manager_style">
   <span class="title_name">实际加油情况</span>
   <div class="Rankings_style">
    <table class="table table-striped table-bordered table-hover">
     <thead>
      <tr>    
      <th width="">供应商名称</th>
      <th width="">联系人</th>
      <th width="">联系电话</th>
      <th width="">产品名称</th>
      <th width="">提供商报价/元</th>
      <th width="">采购数量/吨</th>
      <th width="">实际加油量/吨</th>
      <th width="">小计（元）</th>
      <th width="">合计（元）</th>
      <th width="">备注</th>     
      <th width="">合同附件</th>
  
      </tr>
     </thead>
     <tbody>
      <tr>
       <td><a href="javascript:ovid(0)" class="gys_xinxi">{{comObj.project_name}} </a>></td>
      <td>刘怀帮</td>
      <td style="border-right:0px">135040564333</td>
      <td colspan="5" class="table_jiage">
       <table width="100%" cellpadding="0" cellspacing="0" >
        <tr style=" border-bottom:1px solid #ddd" v-for="(c,index) in comObj.price">
        <td width="">{{comObj.breed[index]}}</td><td width="">{{c}}</td><td width="">{{comObj.purchase_quantity[index]}}</td><td width=""><input name="" type="text" v-model="comObj.reality[index]"  style="margin:5px; width:60px"/></td><td width="">{{c*comObj.reality[index]}}</td>
        </tr>
       </table>
      <td >{{comunt}}</td>
      <td >用户备注信息内容</td>
      <td ><a type="button" class="btn btn-warning File_Scan" href="javascript:ovid(0)">浏览</a></td>
      </tr>
     </tbody>
    </table>
   </div>
  </div>
   <div class="widget-body clearfix">
    <div class="widget-main clearfix">  
        <input multiple type="file" id="id-input-file-3" />
        <!--<label>
            <input type="checkbox" name="file-format" id="id-file-format" class="ace" />
            <span class="lbl"> 只允许图片</span>
        </label>-->
        <button type="button" class="btn Upload_btn">上传文件</button>
    </div>  
</div>
  <div class="Tips_content">
  <h3>询价说明：</h3>
  <p>请供应商及时响应订单，并在订单要求的内容及时供货。</p>
  </div>
  <div class="center"><a href="" class="btn btn-primary">我已加油</a><a href="" class="btn btn-warning print_btn">打印订单</a><a class=" btn  btn-info" href="javascript :;" onClick="javascript :history.back(-1);">取消</a></div>
 </div>
</div>
<!--合同附件样式-->
<div id="File_Scan_style" style="display:none;"><img src="images/1.jpg"></div>
<!--打印订单样式-->
<div id="print_style" class="" :style="elementStyle">
 <div class="page-content">
<div class="Inquiry_info Order_Details_style">
   <div class="Numbering">项目编号<b>NGRT3242342342323</b></div> 
  <div>
   <ul class="clearfix"> 
   <li><label class="label_name">报价公司</label><span>{{comObj.supplier}}</span></li>
   <li><label class="label_name">项目名称</label><span>{{comObj.project_name}}</span></li>
    <li><label class="label_name">加油地点</label><span>{{comObj.place}}</span></li>
    <li><label class="label_name">加油时间</label><span>{{comObj.date}}</span></li>
    <li><label class="label_name">船名</label><span>{{comObj.boat_name}}</span></li>
    <li><label class="label_name">船名联系人</label><span>张先生</span></li>
    <li><label class="label_name">联系电话</label><span>1898654565</span></li> 
   </ul>
  </div>
  <div class="Manager_style">
   <span class="title_name">实际加油情况</span>
   <div class="Rankings_style">
    <table class="table table-striped table-bordered table-hover">
     <thead>
      <tr>    
      <th width="">供应商名称</th>
      <th width="">联系人</th>
      <th width="">联系电话</th>
      <th width="">产品名称</th>
      <th width="">提供商报价/元</th>
      <th width="">采购数量/吨</th>
      <th width="">实际加油量/吨</th>
      <th width="">小计（元）</th>
      <th width="">合计（元）</th>
      <th width="">备注</th>         
     </thead>
     <tbody>
      <tr>
      <td><a href="javascript:ovid(0)" class="gys_xinxi">{{comObj.project_name}}</a></td>
      <td>刘怀帮</td>
      <td style="border-right:0px">135040564333</td>
      <td colspan="5" class="table_jiage">
       <table width="100%" cellpadding="0" cellspacing="0" v-for="(c,index) in comObj.price">
        <tr style=" border-bottom:1px solid #ddd">
        <td width="">{{comObj.breed[index]}}</td><td width="">{{c}}</td><td width="">{{comObj.purchase_quantity[index]}}</td><td width="" >{{comObj.reality[index]}}</td><td width="">{{c*comObj.reality[index]}}</td>
        </tr>
       </table>
      <td >{{comunt}}</td>
      <td >无</td>
      </tr>
     </tbody>
    </table>
   </div>
   <div class="center">
    <button type="button" class="btn btn-primary" @click="evaluation()">确认</button>
    <button type="button" class="btn btn-primary" @click="cancel()">取消</button>
   </div>
  </div>
 </div>
</div>

</div>
</div>
<!--[if !IE]> -->
		<script src="assets/js/jquery.min.js"></script>
		<!-- <![endif]-->

		<!--[if !IE]> -->

		<script type="text/javascript">
			window.jQuery || document.write("<script src='assets/js/jquery-2.0.3.min.js'>"+"<"+"/script>");
		</script>

		<!-- <![endif]-->

		<!--[if IE]>
<script type="text/javascript">
 window.jQuery || document.write("<script src='assets/js/jquery-1.10.2.min.js'>"+"<"+"/script>");
</script>
<![endif]-->
<script src="assets/layer/layer.js" type="text/javascript"></script>
<script src="assets/js/ace-elements.min.js"></script>
<script src="assets/js/ace.min.js"></script>
<script type="text/javascript">
 //弹出一个iframe层
$('.gys_xinxi').on('click', function(){
    layer.open({
        type: 2,
        title: '供应商信息',
        maxmin: true,
        shadeClose: true, //点击遮罩关闭层
        area : ['580px' , '400px'],
        content: '供应商信息.html'
    });
});

 //弹出一个iframe层
$('.File_Scan').on('click', function(){
    layer.open({
        type: 1,
        title: '文件合同扫描件',
        maxmin: true,
        shadeClose: true, //点击遮罩关闭层
        area : ['600px' , ''],
        content: $('#File_Scan_style')
    });
});
//订单打印
$('.print_btn').on('click', function(){
    layer.open({
        type: 1,
        title: '确认打印订单',
        maxmin: true,
        shadeClose: true, //点击遮罩关闭层
        area : ['850px' , ''],
        content: $('#print_style'),
		btn:['确认','取消'],
		yes:function(index,layero){
			  layer.alert('已提交打印信息,订单开始打印!',{
              title: '提示框',				
				icon:1,
			    
			 });
			 layer.close(index); 
			}
    });
});

		$('#id-input-file-3').ace_file_input({
					style:'well',
					btn_choose:'请选择你要上传的文件',
					btn_change:null,
					no_icon:'icon-cloud-upload',
					droppable:true,
					thumbnail:'small'//large | fit
					,icon_remove:null//set null, to hide remove/reset button
					/**,before_change:function(files, dropped) {
						//Check an example below
						//or examples/file-upload.html
						return true;
					}*/
					/**,before_remove : function() {
						return true;
					}*/
					,
					preview_error : function(filename, error_code) {
						//name of the file that failed
						//error_code values
						//1 = 'FILE_LOAD_FAILED',
						//2 = 'IMAGE_LOAD_FAILED',
						//3 = 'THUMBNAIL_FAILED'
						//alert(error_code);
					}
			
				}).on('change', function(){
					//console.log($(this).data('ace_input_files'));
					//console.log($(this).data('ace_input_method'));
				});
				//图片上传事件
				$('#id-file-format').removeAttr('checked').on('change', function() {
					var before_change
					var btn_choose
					var no_icon
					if(this.checked) {
						btn_choose = "请选择上传的图片地址";
						no_icon = "icon-picture";
						before_change = function(files, dropped) {
							var allowed_files = [];
							for(var i = 0 ; i < files.length; i++) {
								var file = files[i];
								if(typeof file === "string") {
									//IE8 and browsers that don't support File Object
									if(! (/\.(jpe?g|png|gif|bmp)$/i).test(file) ) return false;
									//alert('请选择正确的图片 ' + btn_choose);
								}
								else {
									var type = $.trim(file.type);
									if( ( type.length > 0 && ! (/^image\/(jpe?g|png|gif|bmp)$/i).test(type) )
											|| ( type.length == 0 && ! (/\.(jpe?g|png|gif|bmp)$/i).test(file.name) )//for android's default browser which gives an empty string for file.type
										) continue;//not an image so don't keep this file
								
								}
								
								allowed_files.push(file);
							}
							if(allowed_files.length == 0) return false;
			
							return allowed_files;
							
						}
						
					}
					else {
						btn_choose = "请选择上传的文件地址";
						no_icon = "icon-cloud-upload";
						before_change = function(files, dropped) {
							return files;
						}
					}
					
					var file_input = $('#id-input-file-3');
					file_input.ace_file_input('update_settings', {'before_change':before_change, 'btn_choose': btn_choose, 'no_icon':no_icon})
					file_input.ace_file_input('reset_input');
				});
</script>
<script>
  new Vue({
   el : "#app",
   data:{
    comObj:{

    },
    ins :'',
    show:false,
    //LESS(没有加满)COMPLETE(已加满)BEYOND(超出)
    status:'COMPLETE',
    type:'',
    sy:0
   },
   methods:{
    fuel(){
     this.getStatus()

     let re = this.comObj.reality.join(",");
     let br = this.comObj.breed.join(",");
     console.log(br);
     re =encodeURIComponent(JSON.stringify(re.replace(/"/g, '')));
     br = encodeURIComponent(JSON.stringify(br.replace(/"/g, '')));
     if(this.status==='BEYOND'){
      this.$message({
       type: 'info',
       message: '您所加的油量高于合同上的油量请重新添加！'
      });
     }else if(this.status==='COMPLETE'){
      axios.get("orders/complete.do?o_id=" + this.comObj.o_id + "&f=" + re + "&breed=" + br).then(dt => {
       if (dt.data) {
        this.$message({
         type: 'success',
         message: '加油完成!'
        });
        axios.get(`orders/已加油/${this.sy}/update.do`)
        if(this.type==='异常'){
         window.location.href="异常订单处理.html"
        }
        window.location.href = "待加油订单.html"

       } else {
        this.$message({
         type: 'info',
         message: '加油失败!'
        });
       }
      })
     }else {
      axios.get("orders/fuel.do?o_id=" + this.comObj.o_id + "&f=" + re + "&breed=" + br).then(dt => {
       if (dt.data) {
        this.$message({
         type: 'success',
         message: '加油成功!'
        });
        axios.get(`orders/待加油/${this.sy}/update.do`).then(dt =>{
         if(dt.data){
          console.log("...")
         }
         console.log("无")
        })
       } else {
        this.$message({
         type: 'info',
         message: '加油失败!'
        });
       }
      })
     }
    },
    getPut(){
     this.show=true
    },
    getStatus(){
     for (let i = 0; i < this.comObj.reality.length; i++) {
       if(this.comObj.purchase_quantity[i]< this.comObj.reality[i]){
        this.status='BEYOND'
        break
       }else if(this.comObj.purchase_quantity[i]> this.comObj.reality[i]){
        this.status='LESS'
       }
     }
    },
    evaluation(){
     this.show=false;
     this.$message({
      type: 'success',
      message: '订单生成成功!'
     });
    },
    //取消
    cancel(){
     this.show=false
    },
    topCancel(){
     if(this.type==='异常'){
       window.location.href="异常订单处理.html"
     }else {
      window.location.href="待加油订单.html"
     }
    }
   },
   mounted(){
    const urlParams=new URLSearchParams(window.location.search);
    this.sy =urlParams.get("index");
    this.type =urlParams.get("type");
    console.log(this.type)
      axios.get("orders/"+this.type+"/"+this.sy+"/jy.do").then(dt =>{
       for (let i = 0; i < dt.data.length; i++) {
        let comData = {
         o_id: dt.data[i].o_id,
         project_name: dt.data[i].project_name,
         o_number: dt.data[i].o_number,
         prime_date: dt.data[i].prime_date,
         place: dt.data[i].place,
         boat_name: dt.data[i].boat_name,
         supplier: dt.data[i].supplier,
         date: dt.data[i].date,
         breed: dt.data[i].breed.split(","),
         price: dt.data[i].price.split(","),
         purchase_quantity: dt.data[i].purchase_quantity.split(","),
         reality:dt.data[i].reality.split(","),
         total: 0
        };
        for (let j = 0; j < comData.price.length; j++) {
         comData.total += parseFloat(comData.price[j]) * parseFloat(comData.reality[j]);
        }
        this.comObj=comData
       }
      })
   },
   computed: {
    comunt() {
     let cunt = 0;
     for (let i = 0; i < this.comObj.price.length; i++) {
      cunt += this.comObj.price[i] * this.comObj.reality[i];
     }
     return cunt;
    },
    elementStyle() {
     return {
      display: this.show ? 'block' : 'none'
     };
    },
   }
  })
</script>
</body>
</html>
